<template>
	<view class="Download">
		<div class="download_img">
			<u-image mode="widthFix" width="100%" height="100%" src="/static/download.jpg"></u-image>
		</div>
		<view class="download_btns">
			<u-button shape="circle" color="#1fde9e" throttleTime="1000" type="primary" @click="downloadIOS" :customStyle="btnStyle">
				<image class="download_btn_icon" src="/static/ios.png"></image>
				<view class="download_btn_text">iOS版下载</view>
			</u-button>
			<u-button shape="circle" color="#5fb7f9" throttleTime="1000" type="primary" @click="downloadAndroid" :customStyle="btnStyle">
				<image class="download_btn_icon" src="/static/android.png"></image>
				<view class="download_btn_text">安卓版下载</view>
			</u-button>
		</view>
		<!-- <view class="download_name flex_box flex_row_center">
			<image class="download_name_img" src="/static/app-name.jpg"></image>
		</view> -->
		<view v-if="isWx" class="download_bg">
			<image mode="widthFix" class="download_bg_img" src="/static/download-bg.png"></image>
		</view>
	</view>
</template>

<script>
	import { getVersion } from '@/common/http.api.js';
	export default {
		data() {
			return {
				btnStyle: {height: '98rpx',marginBottom: '30rpx'},
				isWx: false,
				versionInfo: null
			}
		},
		onLoad() {
			// #ifdef H5
				let ua = window.navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					this.isWx = true;
				}
			// #endif
			getVersion()
				.then(res => {
					this.versionInfo = res.data;
				})
				.catch(err => {
					uni.$u.toast(err.msg);
				});
		},
		methods: {
			downloadAndroid(){
				location.href = this.versionInfo.android_url;
			},
			downloadIOS(){
				location.href = this.versionInfo.ios_url;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Download{
		background-color: #ffffff;
		.download_img{
			width: 100%;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			overflow: hidden;
		}
		.download_btns{
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			padding: 0 120rpx 60rpx;
			background-color: #ffffff;
			.download_btn_icon{
				width: 48rpx;
				height: 48rpx;
				margin-right: 30rpx;
			}
			.download_btn_text{
				font-size: 30rpx;
				color: #ffffff;
				font-weight: 500;
			}
		}
		.download_name{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 160rpx;
			z-index: 10;
			background-color: #ffffff;
			.download_name_img{
				width: 240rpx;
				height: 50rpx;
			}
		}
		.download_bg{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 20;
			padding: 40rpx;
			background-color: rgba(#ffffff,0.8);
			.download_bg_img{
				width: 100%;
			}
		}
	}
</style>
